import {FC,useEffect,useState} from 'react'
import { useRequest } from 'ahooks';
import { Card, Collapse,CollapseProps,Statistic,Badge,Tag} from 'antd'
import { getAssetInfoStatistics2 } from '@/api/asset';
import {useSearchParams} from 'react-router-dom'

  type ExpandIconPosition = 'start' | 'end';
type PropType = {
    assetCount:number
}
const AssetStatus: FC<PropType> = (props:PropType) => {
    const [expandIconPosition, setExpandIconPosition] = useState<ExpandIconPosition>('start');
    const [AssetStatusData,setAssetStatusData] = useState()
    const [searchParams] = useSearchParams()
    const {run} = useRequest(async ()=>{
        const res = await getAssetInfoStatistics2({})
        return res
    },{
      manual:true,
      onSuccess(data:any){
        setAssetStatusData(data)
      }
    })

    useEffect(()=>{
        run()
    },[searchParams])

    
    const items: CollapseProps['items'] = [
        {
          key: '1',
          label: '资产总数',
          children:<h2>{props.assetCount}</h2>
    
        },
        {
          key: '2',
          label: '端口',
          children:<div style={{display:"flex"}}> {AssetStatusData?.data?.Port.map((item,index)=>{
            return <Statistic style={{marginRight:"20px",textAlign:"center"}} key={index} title={`${item.value} 端口`} value={item.number} />
          })}</div>
    
        },
        {
          key: '3',
          label: '服务',
          children:<div style={{display:"flex"}}> {AssetStatusData?.data?.Service.map((item,index)=>{
            return <Statistic style={{marginRight:"20px",textAlign:"center"}} key={index} title={`${item.value}`} value={item.number} />
          })}</div>
    
        },
 
        
        {
            key: '4',
            label: '应用组件',
            children:<div style={{display:"flex",flexWrap:"wrap",gap:"20px"}}> {AssetStatusData?.data?.Product.map((item,index)=>{
                return <Badge key={index} count={item.number}>
                <Tag color="success">{item.value}</Tag>
                </Badge>
              })}</div>
          },
          {
            key: '5',
            label: 'icon',
            children:<div style={{display:"flex",marginRight:"30px",gap:"20px",flexWrap:"wrap"}}> {AssetStatusData?.data?.Icon.map((item,index)=>{
                return    <Badge key={index} count={item.number}>
                <img  style={{width:"30px",height:"30px"}} src={`data:image/png;base64,${item.value}`}></img>
            </Badge>
              })}</div>
 
      
          },
      ];

  
    const onChange = (key: string | string[]) => {
      console.log(key);
    };
    return (
        <div>
              <Card style={{marginBottom:"20px"}}>
              <Collapse
                ghost
                defaultActiveKey={['1']}
                onChange={onChange}
                expandIconPosition={expandIconPosition}
                items={items}
      />
            </Card>
        </div>
    )
}

export default AssetStatus